<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #app {
        width: 400px;
        display: flex;
        justify-content: space-around;
    }

    #b1 {
        padding: 200px 0;
        width: 50px;
    }
</style>

<body>
    <div id="app">
        <div id="a1">
            <h1><input type="checkbox" v-model="isAllCheckA1">列表1</h1>
            <div v-for="item in list1"><input type="checkbox" v-model="item.checked">
                {{item.name}}
            </div>
        </div>
        <div id="b1">
            <button @click="moveLeft">
                <<< </button>
                    <button @click="moveRight">>></button>
        </div>
        <div id="a2">
            <h1><input type="checkbox" v-model="isAllCheckA2">列表2</h1>
            <div v-for="item in list2"><input type="checkbox" v-model="item.checked">
                {{item.name}}
            </div>
        </div>
    </div>
</body>
<script src="vue.js"></script>
<script>
    const {
        createApp,
        ref,
        reactive,
        computed
    } = Vue;
    const app = createApp({
        setup() {
            // 列表1
            let list1 = ref([
                { name: '备选项1', checked: false },
                { name: '备选项2', checked: false },
                { name: '备选项3', checked: false },
                { name: '备选项4', checked: false },
                { name: '备选项5', checked: false },
                { name: '备选项6', checked: false },
                { name: '备选项7', checked: false },
                { name: '备选项8', checked: false }
            ]);
            // 列表2
            let list2 = ref([
                { name: '备选项9', checked: false },
                { name: '备选项10', checked: false },
                { name: '备选项11', checked: false }
            ]);

            // 列表1全选
            const isAllCheckA1 = computed({
                get() {
                    return list1.value.every(item => item.checked);
                },
                set(val) {
                    list1.value.forEach(item => {
                        item.checked = val;
                    });
                }
            });

            // 列表2全选
            const isAllCheckA2 = computed({
                get() {
                    return list2.value.every(item => item.checked);
                },
                set(val) {
                    list2.value.forEach(item => {
                        item.checked = val;
                    });
                }
            });

            // 将列表1移动到列表2
            const moveRight = () => {
                const selectedItems = list1.value.filter(item => item.checked);
                selectedItems.forEach(item => {
                    item.checked = false;
                    list2.value.push(item);
                });
            };

            // 将列表2移动到列表1
            const moveLeft = () => {
                const selectedItems = list2.value.filter(item => item.checked);
                selectedItems.forEach(item => {
                    item.checked = false;
                    list1.value.push(item);
                });
            };

            return {
                list1,
                isAllCheckA1,
                list2,
                isAllCheckA2,
                moveRight,
                moveLeft
            };
        }
    }).mount('#app');
</script>

</html>